<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姿势识别 - 脊柱健康监测系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            box-shadow: 0 0 30px rgba(0,0,0,0.1);
            border-radius: 10px;
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header .subtitle {
            font-size: 1.2em;
            opacity: 0.9;
            margin-bottom: 20px;
        }

        .nav {
            background: #34495e;
            padding: 0;
        }

        .nav-list {
            display: flex;
            list-style: none;
            justify-content: center;
            flex-wrap: wrap;
        }

        .nav-item {
            margin: 0;
        }

        .nav-link {
            display: block;
            color: white;
            text-decoration: none;
            padding: 15px 25px;
            transition: background 0.3s ease;
            border-radius: 0;
        }

        .nav-link:hover {
            background: #3498db;
        }

        .nav-link.active {
            background: #e74c3c;
        }

        .content {
            padding: 40px 30px;
        }

        .detection-area {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }

        .camera-section {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 30px;
            text-align: center;
        }

        .camera-preview {
            width: 100%;
            height: 300px;
            background: #2c3e50;
            border-radius: 10px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2em;
            position: relative;
            overflow: hidden;
        }

        .camera-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .detection-status {
            background: #27ae60;
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            margin-bottom: 15px;
            display: inline-block;
        }

        .control-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 20px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .btn-primary {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #2980b9 0%, #1f5f8b 100%);
            transform: translateY(-2px);
        }

        .btn-success {
            background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
            color: white;
        }

        .btn-success:hover {
            background: linear-gradient(135deg, #229954 0%, #1e8449 100%);
            transform: translateY(-2px);
        }

        .btn-danger {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
            color: white;
        }

        .btn-danger:hover {
            background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
            transform: translateY(-2px);
        }

        .analysis-section {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 30px;
        }

        .posture-score {
            text-align: center;
            margin-bottom: 30px;
        }

        .score-circle {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 2em;
            font-weight: bold;
        }

        .score-label {
            font-size: 1.2em;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .score-description {
            color: #7f8c8d;
            font-size: 0.9em;
        }

        .analysis-details {
            margin-top: 30px;
        }

        .analysis-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #ecf0f1;
        }

        .analysis-item:last-child {
            border-bottom: none;
        }

        .analysis-label {
            font-weight: 500;
            color: #2c3e50;
        }

        .analysis-value {
            color: #7f8c8d;
        }

        .recommendations {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            border-radius: 10px;
            padding: 25px;
            margin-top: 30px;
        }

        .recommendations h3 {
            color: #e67e22;
            margin-bottom: 15px;
        }

        .recommendation-item {
            background: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 10px;
            border-left: 4px solid #e67e22;
        }

        .recommendation-item:last-child {
            margin-bottom: 0;
        }

        .history-section {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-top: 30px;
        }

        .history-item {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #ecf0f1;
        }

        .history-item:last-child {
            border-bottom: none;
        }

        .history-time {
            color: #95a5a6;
            font-size: 0.9em;
            margin-right: 20px;
            min-width: 80px;
        }

        .history-score {
            background: #3498db;
            color: white;
            padding: 5px 12px;
            border-radius: 15px;
            margin-right: 20px;
            font-weight: bold;
        }

        .history-details {
            flex: 1;
            color: #2c3e50;
        }

        .footer {
            background: #2c3e50;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 50px;
        }

        @media (max-width: 768px) {
            .detection-area {
                grid-template-columns: 1fr;
            }
            
            .content {
                padding: 20px 15px;
            }
            
            .nav-list {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>📷 姿势识别</h1>
            <p class="subtitle">AI智能姿势检测与纠正指导</p>
        </header>

        <nav class="nav">
            <ul class="nav-list">
                <li class="nav-item"><a href="index.html" class="nav-link">🏠 首页</a></li>
                <li class="nav-item"><a href="posture-detection.html" class="nav-link active">📷 姿势识别</a></li>
                <li class="nav-item"><a href="rehabilitation.html" class="nav-link">🏃 康复训练</a></li>
                <li class="nav-item"><a href="pain-record.html" class="nav-link">📊 疼痛记录</a></li>
                <li class="nav-item"><a href="data-analysis.html" class="nav-link">📈 数据分析</a></li>
                <li class="nav-item"><a href="doctor-portal.html" class="nav-link">👨‍⚕️ 医护端</a></li>
            </ul>
        </nav>

        <main class="content">
            <div class="detection-area">
                <div class="camera-section">
                    <h3>📹 实时姿势检测</h3>
                    <div class="camera-preview">
                        <div class="camera-overlay">
                            <div class="detection-status">🔴 检测中...</div>
                            <p>请保持正确坐姿</p>
                        </div>
                    </div>
                    <div class="control-buttons">
                        <button class="btn btn-primary" onclick="startDetection()">开始检测</button>
                        <button class="btn btn-success" onclick="capturePosture()">拍照分析</button>
                        <button class="btn btn-danger" onclick="stopDetection()">停止检测</button>
                    </div>
                </div>

                <div class="analysis-section">
                    <h3>📊 姿势分析结果</h3>
                    <div class="posture-score">
                        <div class="score-circle">85</div>
                        <div class="score-label">姿势评分</div>
                        <div class="score-description">良好，但仍有改进空间</div>
                    </div>
                    
                    <div class="analysis-details">
                        <div class="analysis-item">
                            <span class="analysis-label">头部位置</span>
                            <span class="analysis-value">正常</span>
                        </div>
                        <div class="analysis-item">
                            <span class="analysis-label">肩部对齐</span>
                            <span class="analysis-value">轻微倾斜</span>
                        </div>
                        <div class="analysis-item">
                            <span class="analysis-label">背部挺直</span>
                            <span class="analysis-value">良好</span>
                        </div>
                        <div class="analysis-item">
                            <span class="analysis-label">腰部支撑</span>
                            <span class="analysis-value">需要改善</span>
                        </div>
                        <div class="analysis-item">
                            <span class="analysis-label">腿部位置</span>
                            <span class="analysis-value">正常</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="recommendations">
                <h3>💡 姿势改善建议</h3>
                <div class="recommendation-item">
                    <strong>调整座椅高度：</strong>确保双脚平放在地面上，膝盖与臀部同高
                </div>
                <div class="recommendation-item">
                    <strong>背部支撑：</strong>使用腰垫或调整座椅靠背，保持腰部自然曲线
                </div>
                <div class="recommendation-item">
                    <strong>屏幕位置：</strong>屏幕顶部应与眼睛平齐，距离50-70厘米
                </div>
                <div class="recommendation-item">
                    <strong>肩部放松：</strong>保持肩膀自然下垂，避免耸肩
                </div>
            </div>

            <div class="history-section">
                <h3>📈 检测历史记录</h3>
                <div class="history-item">
                    <div class="history-time">今天 14:30</div>
                    <div class="history-score">85分</div>
                    <div class="history-details">坐姿检测 - 肩部轻微倾斜，建议调整</div>
                </div>
                <div class="history-item">
                    <div class="history-time">今天 10:15</div>
                    <div class="history-score">92分</div>
                    <div class="history-details">站姿检测 - 姿势良好</div>
                </div>
                <div class="history-item">
                    <div class="history-time">昨天 16:45</div>
                    <div class="history-score">78分</div>
                    <div class="history-details">坐姿检测 - 腰部支撑不足</div>
                </div>
                <div class="history-item">
                    <div class="history-time">昨天 09:20</div>
                    <div class="history-score">88分</div>
                    <div class="history-details">坐姿检测 - 整体良好</div>
                </div>
            </div>
        </main>

        <footer class="footer">
            <p>&copy; 2024 脊柱健康监测与康复指导系统 | 智能健康管理平台</p>
        </footer>
    </div>

    <script>
        function startDetection() {
            alert('开始姿势检测...\n请保持摄像头开启，系统将实时分析您的姿势');
        }

        function capturePosture() {
            alert('正在拍照分析您的姿势...\n请保持姿势3秒钟');
        }

        function stopDetection() {
            alert('已停止姿势检测');
        }
    </script>
</body>
</html>
